'use strict';
//我的账户
import React,{Component} from 'react';
import Header from '../../common/header';
import * as URLconstant from '../../constant/URLconstant'
import Util from '../../common/util';
import {
    View,
    Text,
    TouchableOpacity,
    Image,
    StyleSheet,
    ScrollView
} from 'react-native';
export default class myWallet extends Component{
    // 构造
      constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            timeSelect: [{ 'name': '最近一周', 'status': 7 }, { 'name': '最近一月', 'status': 30 }, { 'name': '最近三月', 'status': 90 }],
            timeStatus:7,
            yue:0,
            list:[],
            loaded:true
        };
      }

    componentDidMount() {
        this.getMyWallet()
    }

      getMyWallet(){
          let params = this.props.route.params
          let url = URLconstant.MY_WALLET
          let datakey=[]
          let timeStatus = this.state.timeStatus
          datakey['day']=timeStatus
          datakey['user_id']=params.user_id
          Util.get(url,datakey,this.getMyWalletSuc.bind(this),this.errorCallback.bind(this))
      }

    getMyWalletSuc(datas){
        if(datas.status==0){
            this.setState({
                yue:datas.data.yue,
                list:datas.data.list,
                loaded:false
            })
        }
    }
    errorCallback(err){

    }

    async selectTime(status){
        await this.setState({
            timeStatus:status
        })
        this.getMyWallet()
    }

      render(){
          return(
              <View style={{flex:1,}}>
                  <Header navigation={this.props.navigation} title={'我的钱包'}/>
                  {
                      this.state.loaded?
                          <View style={{flex:1}}>
                              {Util.loading()}
                          </View>:
                          <View style={{flex:1}}>
                              <View style={{flex:1}}>
                                  <View style={styles.wrap_t}>
                                      <Text style={{fontSize:14,color:"#fff"}}>余额</Text>
                                      <Text style={{fontSize:28,color:"#fff"}}>{this.state.yue}</Text>
                                  </View>
                                  <View style={styles.last_header}>
                                      <Text style={{fontSize:14,color:"#676767"}}>最新交易记录</Text>
                                  </View>
                                  <View style={styles.list_view}>
                                      <View style={styles.tap}>
                                          {
                                              this.state.timeSelect.map((item,index)=>{
                                                  return(
                                                      <TouchableOpacity onPress={()=>this.selectTime(item.status)} key={index} style={[index==1?styles.border_w:null,item.status==this.state.timeStatus?styles.select_tap:styles.tap_item]}>
                                                          <Text style={item.status==this.state.timeStatus?{fontSize:12,color:"#fff"}:{fontSize:12,color:"#5c5c5c"}}>{item.name}</Text>
                                                      </TouchableOpacity>
                                                  )
                                              })
                                          }
                                      </View>
                                      {
                                          this.state.list.length==0?
                                              <View style={{alignItems:'center',paddingTop:10}}>
                                                  <Text style={{fontSize:12,color:"#999"}}>没有其他交易记录了</Text>
                                              </View>
                                              :
                                              <ScrollView style={{flex:1}}>
                                                  {
                                                      this.state.list.map((item,index)=>{
                                                          return(
                                                              <View key={index} style={styles.list_item}>
                                                                  <View style={styles.item_rows}>
                                                                      {
                                                                          item.presenter_amount>0?
                                                                              <Text style={{fontSize:12,color:"#999"}}>业务摘要:{item.zhaiyao}(赠送{item.presenter_amount})</Text>
                                                                              :
                                                                              <Text style={{fontSize:12,color:"#999"}}>业务摘要:{item.zhaiyao}</Text>
                                                                      }
                                                                      <Text>交易状态:{item.status||'已完成'}</Text>
                                                                  </View>
                                                                  <View style={styles.item_rows}>
                                                                      {
                                                                          item.type==1?
                                                                              <Text style={{fontSize:12,color:"#f00"}}>交易金额:-{item.price}</Text>
                                                                              :
                                                                              <Text style={{fontSize:12,color:"#0f0"}}>交易金额:+{item.price}</Text>
                                                                      }
                                                                      <Text style={{fontSize:10,color:"#999"}}>交易时间:{item.add_time}</Text>
                                                                  </View>
                                                              </View>
                                                          )
                                                      })
                                                  }
                                              </ScrollView>
                                      }
                                  </View>
                              </View>
                          </View>
                  }
              </View>
          )
      }
}
var styles = StyleSheet.create({
    wrap_t:{
        padding:20,
        backgroundColor:"#2d8e2d"
    },
    last_header:{
        height:30,
        paddingHorizontal:10,
        justifyContent:'center'
    },
    list_view:{
        padding:10,
        backgroundColor:"#fff",
        flex:1
    },
    tap:{
        flexDirection:'row',
        borderRadius:5,
        borderWidth:1,
        borderColor:"#5c5c5c",
        marginBottom:10
    },
    tap_item:{
        flex:1,
        height:30,
        alignItems:'center',
        justifyContent:'center'
    },
    select_tap:{
        flex:1,
        height:30,
        alignItems:'center',
        justifyContent:'center',
        backgroundColor:"#5c5c5c"
    },
    border_w:{
        borderLeftWidth:1,
        borderLeftColor:"#5c5c5c",
        borderRightWidth:1,
        borderRightColor:"#5c5c5c"
    },
    list_item:{
        height:50,
        paddingVertical:10,
        borderBottomWidth:1,
        borderBottomColor:"#e0e0e0",
        justifyContent:'space-between',
    },
    item_rows:{
        flexDirection:"row",
        alignItems:'center',
        justifyContent:'space-between'
    }
})